<template>
  <div>
    <!-- <div v-if="!isLogin" class="login-content body-bg" :style="{height: windowHeight+48+'px'}">
      <button v-if="canIUse" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"><img src="/static/images/WeChat.png" alt="wechat"> 使用微信授权登录</button>
      <p v-else>请升级微信版本</p>
    </div> -->
    <div class="index-content">
      <!-- 孩子信息 -->
      <div class="user-information">
        <img class="user-head-img" :src="child_photo || '/static/images/user.png'" alt="头像" @click="goChildList">
        <ul class="right-infor">
          <li class="name">{{child_name}}</li>
          <li class="address" @click="showSchool">
            <img class="address-icon" src="/static/images/index/icon-address.png" alt="地址">
            <span class="address-name">{{schoolName}}</span>
            <van-icon class="right-icon" name="arrow" />
          </li>
        </ul>
      </div>
      <!-- 功能入口 -->
      <div class="function-enter">
        <ul class="function-cont">
          <li class="enter-items" @click="signUp">
            <img class="enter-icon" src="/static/images/index/icon1.png" alt="报名咨询">
            <p class="enter-name">报名咨询</p>
          </li>
          <li class="enter-items" @click="curriculumEvaluation">
            <img class="enter-icon" src="/static/images/index/icon2.png" alt="课程&评价">
            <p class="enter-name">课程&评价</p>
          </li>
          <li class="enter-items" @click="changeClass">
            <img class="enter-icon" src="/static/images/index/icon3.png" alt="我要转班">
            <p class="enter-name">我要转班</p>
          </li>
          <li class="enter-items" @click="remedialTeaching">
            <img class="enter-icon" src="/static/images/index/icon4.png" alt="我要补课">
            <p class="enter-name">我要补课</p>
          </li>
          <li class="enter-items" @click="goClassList">
            <img class="enter-icon" src="/static/images/index/icon5.png" alt="我要请假">
            <p class="enter-name">我要请假</p>
          </li>
          <li class="enter-items" @click="renew">
            <img class="enter-icon" src="/static/images/index/icon6.png" alt="点我续费">
            <p class="enter-name">点我续费</p>
          </li>
        </ul>
      </div>
      <!-- 分割条 -->
      <van-sticky><div class="grey-bg"></div></van-sticky>
      <!-- 活动赛事 -->
      <div class="activity-content">
        <van-sticky offset-top="8"><p class="activity-title">活动赛事</p></van-sticky>
        <ul class="activity-cont" v-if="activities.length">
          <li class="activity-items border-bottom" v-for="(item,index) in activities" :key="index" @click="goDet">
            <van-image lazy-load use-loading-slot use-error-slot :src="item.src">
              <van-loading slot="loading" type="spinner" size="20" vertical/>
              <text slot="error">加载失败</text>
            </van-image>
            <ul class="activity-right-infor">
              <li class="activity-infor-title"><span class="baoming-icon">报名中</span>{{item.title}}</li>
              <li class="activity-data-time">活动时间：{{item.dateTime}}</li>
              <li class="activity-address">活动地点：{{item.address}}</li>
            </ul>
          </li>
          <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
          <li v-if="isBottom" class="activity-items bottom-line">-- 亲，已经到最后了--</li>
        </ul>
        <div v-else class="empty">
          <img src="/static/images/empty-icon.png" alt="空">
          <p class="empty-tips">暂无活动赛事</p>
        </div>
        
      </div> 
      <!-- 选择校区 -->
      <van-popup :show="showPicker" @close="showPicker = false" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import Ls from '@/utils/storage'
export default {
  data () {
    return {
      canIUse: wx.canIUse('button.open-type.getPhoneNumber'),
      windowHeight: this.$store.state.windowHeight,
      isLogin: false, // 是否登录
      isBottom: false, // 是否加载完全部数据
      isReachBottom: false, // 是否再进行上拉加载
      child_photo: Ls.getItem("childInfor").child_photo,
      child_name: Ls.getItem("childInfor").child_name,
      total: 0, // 返回数据总条数
      curr_page: 1,
      page_size: 5,
      schoolName: '杭州',
      schoolIndex: 0,
      showPicker: false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      activities:[], // 赛事列表
    }
  },
  created () {
    let app = getApp();
    // if(!this.isLogin){
    //   wx.hideTabBar();
    // }
  },
  onLoad() {
    this.isReachBottom = false;
    this.getActivityRelatedList();
  },
  // 下拉刷新
  onPullDownRefresh: function() {
    this.curr_page = 1;
    this.isBottom = false;
    this.isReachBottom = false;
    this.getActivityRelatedList();
  },
  // 上拉加载
  onReachBottom () {
    if(this.isBottom) return;
    this.isReachBottom = true;
    this.getActivityRelatedList();
  },
  methods: {
    // 授权手机号登录
    getPhoneNumber(e) {
      console.log(e.mp.detail.iv)
      console.log(e.mp.detail.encryptedData)
      let that = this;
      wx.checkSession({
        success: function () {
          console.log("checkSession true")
          wx.login({
            success: res => {
              // 开始自己的登录流程
              that.isLogin = true;
              wx.setNavigationBarTitle({
                title: '首页' 
              });
              wx.showTabBar();
            }
          })
        },
        fail: function () {
          console.log("checkSession fail")
          wx.login({
            success: res => {
              // 开始自己的登录流程
              that.isLogin = true;
              wx.setNavigationBarTitle({
                title: '首页' 
              });
              wx.showTabBar();
            }
          })
        }
      })
    },
    // 获取活动列表
    getActivityRelatedList() {
      let that = this;
      wx.showNavigationBarLoading() //在标题栏中显示加载
      if(this.isReachBottom) {
        this.curr_page++;
      }
      this.$fetch.getActivityRelatedList({
        curr_page: this.curr_page,
        page_size: this.page_size
      }).then(res=>{
        wx.hideNavigationBarLoading() //在标题栏中隐藏加载
        wx.stopPullDownRefresh(); //完成停止加载
        this.isReachBottom = false;
        this.total = res.result.total;
        if(this.isReachBottom) {
          this.activities = [...this.activities, ...res.result.data];
          let len = this.activities.length;
          if(len== this.total){
            this.isBottom = true;
          }
          this.isReachBottom = false;
          return
        }
        this.activities = res.result.data;
      }).catch(err=>{
        console.log(err)
        this.isReachBottom = false;
        wx.hideNavigationBarLoading() //在标题栏中隐藏加载
        wx.stopPullDownRefresh(); //完成停止加载
        wx.showToast({
          title: err.code_user_msg || err.code_msg,
          icon: 'none'
        })
      })
    },
    // 切换校区
    showSchool() {
      this.showPicker = true;
    },
    onConfirm(e) {
      this.schoolName = e.mp.detail.value;
      this.schoolIndex = e.mp.detail.index;
      this.showPicker = false;
    },
    // 孩子列表
    goChildList() {
      wx.navigateTo({
        url: '/pages/childsList/main',
      })
    },
    // 报名咨询
    signUp() {
      wx.navigateTo({
        url: '/pages/signUp/main?from=1',
      })
    },
    // 报名咨询
    curriculumEvaluation() {
      wx.navigateTo({
        url: '/pages/myClass/main',
      })
    },
    // 转班
    changeClass() {
      wx.navigateTo({
        url: '/pages/changeClass/main',
      })
    },
    // 补课
    remedialTeaching() {
      wx.navigateTo({
        url: '/pages/remedialTeachingList/main',
      })
    },
    // 请假
    goClassList() {
      wx.navigateTo({
        url: '/pages/classList/main',
      })
    },
    // 续费
    renew() {
      wx.navigateTo({
        url: '/pages/renew/main',
      })
    },
    // 进入活动详情
    goDet() {
      wx.navigateTo({
        url: '/pages/activityDetails/main',
      })
    }
  },
}
</script>
<style lang="less">
  // 改样式用来重置vant 默认样式
  .address{
    .van-icon-arrow{
      color: #333;
      font-size: 12px !important;
      margin-left: 6px;
    }
  }
  .activity-items{
    .van-image{
      width: 105px !important;
      height: 80px !important;
    }
  }
</style>
<style lang="less" scoped>
.login-content{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  ._button{
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 34px;
      height: 34px;
      margin-right: 6px;
    }
  }
}
.index-content{
  width: 100%;
  // 分割条
  .grey-bg{
    width: 100%;
    height: 10px;
    background: #F1F2F7;
  }
  // 用户信息
  .user-information{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 18px;
    box-sizing: border-box;
    background: #F1F2F7;
    .user-head-img{
      min-width: 62px;
      width: 62px;
      height: 62px;
      border-radius: 100%;
      display: block;
      margin-right: 22px;
    }
    .right-infor{
      overflow: hidden;
      flex-grow: 1;
      .name{
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 16px;
        color: #333;
        font-weight: bold;
      }
      .address{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 10px;
        .address-icon{
          width: 14px;
          height: 14px;
        }
        .address-name{
          font-size: 13px;
          color: #666;
          margin-left: 6px;
        }
      }
    }
  }
  // 功能入口
  .function-enter{
    width: 100%;
    padding: 10px 30px;
    box-sizing: border-box;
    .function-cont{
      width: 100%;
      height: 212px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      .enter-items{
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .enter-icon{
          width: 62px;
          height: 62px;
          display: block;
        }
        .enter-name{
          font-size: 14px;
          color: #333;
        }
      }
    }
  }
  // 活动赛事
  .activity-content{
    width: 100%;
    .activity-title{
      width: 100%;
      height: 50px;
      font-size: 14px;
      font-weight: bold;
      color: #333;
      display: flex;
      padding: 0 18px;
      text-indent: 10px;
      box-sizing: border-box;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 0.5px solid #F1F2F7;
      background: #fff;
      &::before{
        content: "";
        width: 4px;
        height: 18px;
        background: #1BD1FF;
        border-radius: 4px;
        overflow: hidden;
        margin-right: 10px;
      }
    }
    .activity-cont{
      width: 100%;
      padding: 0 18px;
      box-sizing: border-box;
      .activity-items{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 20px 0;
        box-sizing: border-box;
        &:last-child{
          border-bottom: 0;
        }
        img{
          display: block;
        }
        .activity-right-infor{
          flex-grow: 1;
          height: 80px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          margin-left: 16px;
          .activity-infor-title{
            width: 100%;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            line-height: 20px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            .baoming-icon{
              width: 45px;
              height: 16px;
              background:linear-gradient(53deg,rgba(70,174,247,1) 0%,rgba(29,213,230,1) 100%);
              border-radius:16px;
              font-size: 12px;
              color: #fff;
              padding: 0 6px;
              margin-right: 6px;
            }
          }
          .activity-data-time{
            font-size: 12px;
            color: #969CA8;
          }
          .activity-address{
            font-size: 12px;
            color: #969CA8;
          }
        }
      }
    }
  }
}
</style>
